<template>
  <div>
    <h1>Breadcrumbs（面包屑导航）</h1>
    <p>
      v-breadcrumbs 组件是页面的导航辅助。 它可以接受 ** Material图标**
      或文本字符作为分隔符。 对象数组可以传递到组件的 ** items ** 属性。
      此外，还存在更多控制面包屑的插槽，使用 v-breadcrumbs-item
      或其他自定义标记。
    </p>

    <br />
    <h2>属性</h2>

    <br />
    <h3>divider</h3>
    <p>可以使用 divider 属性来设置面包屑分隔符。</p>
    <div>
      <v-breadcrumbs :items="items" divider="-"></v-breadcrumbs>
      <v-breadcrumbs :items="items" divider="."></v-breadcrumbs>
    </div>

    <br />
    <h3>large</h3>
    <p>大的面包屑具有较大的字体。</p>
    <div>
      <v-breadcrumbs :items="items"></v-breadcrumbs>
      <v-breadcrumbs :items="items" large></v-breadcrumbs>
    </div>

    <br />
    <h2>插槽</h2>

    <br />
    <h3>divider槽</h3>
    <p>对于图标变量，面包屑可以使用Material设计中的任何图标。</p>
    <div>
      <v-breadcrumbs :items="items">
        <template v-slot:divider>
          <v-icon>mdi-forward</v-icon>
        </template>
      </v-breadcrumbs>

      <v-breadcrumbs :items="items">
        <template v-slot:divider>
          <v-icon>mdi-chevron-right</v-icon>
        </template>
      </v-breadcrumbs>
    </div>

    <br />
    <h3>item槽</h3>
    <p>您可以使用 item 插槽自定义每个面包屑。</p>
    <v-breadcrumbs :items="items">
      <template v-slot:item="{ item }">
        <v-breadcrumbs-item :href="item.href" :disabled="item.disabled">
          {{ item.text.toUpperCase() }}
        </v-breadcrumbs-item>
      </template>
    </v-breadcrumbs>
  </div>
</template>

<script>
export default {
  data: () => ({
    items: [
      {
        text: "Dashboard",
        disabled: false,
        href: "breadcrumbs_dashboard",
      },
      {
        text: "Link 1",
        disabled: false,
        href: "breadcrumbs_link_1",
      },
      {
        text: "Link 2",
        disabled: true,
        href: "breadcrumbs_link_2",
      },
    ],
  }),
};
</script>